import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    TouchableWithoutFeedback
} from 'react-native';


export default class CourseItem extends Component {

    constructor(props) {
        super(props);
        this.state = {
            
        };
    }

    render() {
        const {data, navigation, styles} = this.props;
        return (
        <TouchableWithoutFeedback
            onPress={()=>{ navigation.navigate("Detail", { courseId: data.id })}}
   
        >
            <View style={styles.courseItem}>
                <View style={styles.imgView}>
                    <Image
                        source={{uri: data.course_img}}
                        style={styles.imgView}
                    />
                </View>
                <View style={styles.courseName}>
                    <Text
                        style={styles.courseNameText}
                    >
                        {data.course_name}
                    </Text>
                </View>
                <View style={styles.teacherInfo}>
                    <Image
                         source={{uri: data.teacher_img}}
                         style={styles.teacherImage}
                    />
                    <Text
                        style={styles.teacherName}
                    >
                        {data.teacher_name}
                    </Text>
                </View>
                <View style={styles.price}>
                    <Text
                        style={styles.priceNum}
                    >
                        ￥{data.price}
                    </Text>
                </View>
            </View>
        </TouchableWithoutFeedback>
        );
    }
    
}

